<template>
  <div class="p-4">
    <GrowCard :loading="loading" :growCardList="growCardList" :dataMonth="dataMonth" class="enter-y" />
    <SiteAnalysis class="!my-4 enter-y" :loading="loading" :electricrEveryMonthData="electricrEveryMonthData" />
    <div class="md:flex enter-y">
      <PieAmount class="md:w-1/3 w-full" :loading="loading" :pieAmountList="pieAmountList" />
      <PieCount class="md:w-1/3 w-full" :loading="loading" :pieCountList="pieCountList" />
      <PieKWHL class="md:w-1/3 w-full" :loading="loading" :pieKWHList="pieKWHList" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import GrowCard from '../components/GrowCard.vue';
  import SiteAnalysis from '../components/SiteAnalysis.vue';
  import PieKWHL from '../components/PieKWHL.vue';
  import PieAmount from '../components/PieAmount.vue';
  import PieCount from '../components/PieCount.vue';
  import { getDormStatistic, getCurrentMonthStatistic } from '../api';
  import { Month, Item } from '../data';
  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 500);

  const growCardKey = ['Electric_roomAll', 'Electric_serviceCount', 'Electric_AmountAll']; //头部总数据Key
  const growCardList = ref<Item[]>([]); //头部总数据
  const electricEveryMonth = ['Electric_EveryMonth']; //近12个月（每月充值金额，充电次数，充电度数）Key
  const electricrEveryMonthData = ref<Item[]>([]); //近12个月（每月充值金额，充电次数，充电度数）

  const pieAmountKey = ['Electric_bid_Amount_Percent']; //每栋楼充电金额Key
  const pieAmountList = ref<Item[]>([]); //每栋楼充电金额
  const pieCountKey = ['Electric_bid_count_Percent']; //每栋楼充电次数Key
  const pieCountList = ref<Item[]>([]); //每栋楼充电次数
  const pieKWHKey = ['Electric_bid_KWH_Percent']; //每栋楼充电度数Key
  const pieKWHList = ref<Item[]>([]); //每栋楼充电度数
  const dataMonth = reactive<Month>({
    Water_weight_everymonth: 0,
    Water_amount_everymonth: 0,
    Water_times_everymonth: 0,
    Electric_EveryMonth_times: 0,
    Electric_EveryMonth_AllMoney: 0,
    Electric_EveryMonth_ALLQuantity: 0,
  });

  const filterFun = (target: any[], res: Item[]) => {
    return res.filter((item: Item) => target.includes(item.dataCallStoredProcedure));
  };

  const getDormStatisticFun = async () => {
    const res = await getDormStatistic({});
    growCardList.value = filterFun(growCardKey, res);
    electricrEveryMonthData.value = filterFun(electricEveryMonth, res);
    pieAmountList.value = filterFun(pieAmountKey, res);
    pieCountList.value = filterFun(pieCountKey, res);
    pieKWHList.value = filterFun(pieKWHKey, res);
  };

  const getCurrentMonthStatisticFun = async () => {
    const res = await getCurrentMonthStatistic({});
    res.forEach((element: Item) => {
      if (element.dataCallStoredProcedure !== 'Electric_EveryMonth') {
        dataMonth[element.dataCallStoredProcedure] = Number(element.dataValue);
      } else {
        const dataValue = JSON.parse(element.dataValue);
        for (const key in dataValue) {
          if (dataValue.hasOwnProperty(key)) {
            dataMonth[`Electric_EveryMonth_${key}`] = Number(dataValue[key]);
          }
        }
      }
    });
  };

  getDormStatisticFun();
  getCurrentMonthStatisticFun();
</script>
